@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800);

* {
    box-sizing: border-box;
}
html,
body {
    overflow-x: hidden;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    color: #fff;
    background: #efefef;
}
@mixin epic-sides() { // https://codepen.io/MichaelArestad/pen/qltuk
                                                               position: relative;
    z-index: 1;

&:before {
     position: absolute;
     content: "";
     display: block;
     top: 0;
     left: -5000px;
     height: 100%;
     width: 15000px;
     z-index: -1;
 @content;
 }
}
.row {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 30px;
    background: #032429;
@include epic-sides() {background: inherit;}
text-align: center;

&:first-child {
     padding: 40px 30px;
 }
&:nth-child(2),
&:nth-child(8),
&:nth-child(10){
     background: #134A46;
 }
&:nth-child(3),
&:nth-child(7) {
     background: #377D6A;
 }
&:nth-child(4),
&:nth-child(6) {
     background: #7AB893;
 }
&:nth-child(5) {
     background: #B2E3AF;
 }

span {
    position: relative;
    display: inline-block;
    margin: 30px 10px;
}
}
.basic-slide {
    display: inline-block;
    width: 215px;
    padding: 10px 0 10px 15px;
    font-family: "Open Sans", sans;
    font-weight: 400;
    color: #377D6A;
    background: #efefef;
    border: 0;
    border-radius: 3px;
    outline: 0;
    text-indent: 70px; // Arbitrary.
transition: all .3s ease-in-out;

&::-webkit-input-placeholder {
     color: #efefef;
     text-indent: 0;
     font-weight: 300;
 }

+ label {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 15px;
    text-shadow: 0 1px 0 rgba(19,74,70,.4);
    background: #7AB893;
    transition: all .3s ease-in-out;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
}
.basic-slide:focus,
.basic-slide:active {
    color: #377D6A;
    text-indent: 0;
    background: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

&::-webkit-input-placeholder {
     color: #aaa;
 }
+ label {
    transform: translateX(-100%);
}
}
.clean-slide {
    position: relative;
    display: inline-block;
    width: 215px;
    padding: 10px 0 10px 15px;
    font-family: "Open Sans", sans;
    font-weight: 400;
    color: #377D6A;
    background: #efefef;
    border: 0;
    border-radius: 3px;
    outline: 0;
    text-indent: 60px; // Arbitrary.
transition: all .3s ease-in-out;

&::-webkit-input-placeholder {
     color: #efefef;
     text-indent: 0;
     font-weight: 300;
 }

+ label {
    display: inline-block;
    position: absolute;
    transform: translateX(0);
    top: 0;
    left: 0;
    bottom: 0;
    padding: 13px 15px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #032429;
    text-align: left;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    transition: all .3s ease-in-out, color .3s ease-out;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    overflow: hidden;

&:after {
     content: "";
     position: absolute;
     top: 0;
     right: 100%;
     bottom: 0;
     width: 100%;
     background: #7AB893;
     z-index: -1;
     transform: translate(0);
     transition: all .3s ease-in-out;
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
 }
}
}
.clean-slide:focus,
.clean-slide:active {
    color: #377D6A;
    text-indent: 0;
    background: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

&::-webkit-input-placeholder {
     color: #aaa;
 }
+ label {
    color: #fff;
    text-shadow: 0 1px 0 rgba(19,74,70,.4);
    transform: translateX(-100%);

&:after {
     transform: translate(100%);
 }
}
}
.gate {
    display: inline-block;
    width: 215px;
    padding: 10px 0 10px 15px;
    font-family: "Open Sans", sans;
    font-weight: 400;
    color: #377D6A;
    background: #efefef;
    border: 0;
    border-radius: 3px;
    outline: 0;
    text-indent: 65px; // Arbitrary.
transition: all .3s ease-in-out;

&::-webkit-input-placeholder {
     color: #efefef;
     text-indent: 0;
     font-weight: 300;
 }

+ label {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 15px;
    text-shadow: 0 1px 0 rgba(19,74,70,.4);
    background: #7AB893;
    transition: all .4s ease-in-out;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    transform-origin: left bottom;
    z-index: 99;

&:before,
&:after {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     border-radius: 3px;
     background: #377D6A;
     transform-origin: left bottom;
     transition: all .4s ease-in-out;
     pointer-events: none;
     z-index: -1;
 }
&:before {
     background: rgba(3,36,41,.2);
     z-index: -2;
     right: 20%;
 }
}
}
span:nth-child(2) .gate {
    text-indent: 85px;
}
span:nth-child(2) .gate:focus,
span:nth-child(2) .gate:active{
    text-indent: 0;
}
.gate:focus,
.gate:active {
    color: #377D6A;
    text-indent: 0;
    background: #fff;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;

&::-webkit-input-placeholder {
     color: #aaa;
 }
+ label {
    transform: rotate(-66deg);
    border-radius: 3px;

&:before {
     transform: rotate(10deg);
 }
}
}
.skinny {
    display: inline-block;
    width: 215px;
    padding: 10px 0 10px 15px;
    font-family: "Open Sans", sans;
    font-weight: 400;
    color: #377D6A;
    background: #efefef;
    border: 0;
    border-radius: 3px;
    outline: 0;
    text-indent: 75px; // Arbitrary.
transition: all .3s ease-in-out;

&::-webkit-input-placeholder {
     color: #efefef;
     text-indent: 0;
     font-weight: 300;
 }

+ label {
    display: inline-block;
    position: absolute;
    transform: translateX(0);
    top: 0;
    left: 0;
    padding: 10px 15px;
    text-shadow: 0 1px 0 rgba(19,74,70,.4);
    transition: all .3s ease-in-out;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    overflow: hidden;

&:before,
&:after {
     content: "";
     position: absolute;
     right: 0;
     left: 0;
     z-index: -1;
     transition: all .3s ease-in-out;
 }
&:before {
 // Skinny bit here
 top: 5px;
     bottom: 5px;
     background: #377D6A; // change this to #134A46
 border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
 }
&:after {
     top: 0;
     bottom: 0;
     background: #377D6A;
 }
}
}
.skinny:focus,
.skinny:active {
    color: #377D6A;
    text-indent: 0;
    background: #fff;

&::-webkit-input-placeholder {
     color: #aaa;
 }
+ label {
    transform: translateX(-100%);

&:after {
     transform: translateX(100%);
 }
}
}
.slide-up {
    display: inline-block;
    width: 215px;
    padding: 10px 0 10px 15px;
    font-family: "Open Sans", sans;
    font-weight: 400;
    color: #377D6A;
    background: #efefef;
    border: 0;
    border-radius: 3px;
    outline: 0;
    text-indent: 80px; // Arbitrary.
transition: all .3s ease-in-out;

&::-webkit-input-placeholder {
     color: #efefef;
     text-indent: 0;
     font-weight: 300;
 }

+ label {
    display: inline-block;
    position: absolute;
    transform: translateX(0);
    top: 0;
    left: 0;
    padding: 10px 15px;
    text-shadow: 0 1px 0 rgba(19,74,70,.4);
    transition: all .3s ease-in-out;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    overflow: hidden;

&:before,
&:after {
     content: "";
     position: absolute;
     right: 0;
     left: 0;
     z-index: -1;
     transition: all .3s ease-in-out;
 }
&:before {
 // Skinny bit here
 top: 6px;
     left: 5px;
     right: 5px;
     bottom: 6px;
     background: #377D6A; // change this to #134A46
 }
&:after {
     top: 0;
     bottom: 0;
     background: #377D6A;
 }
}
}
span:nth-child(1) .slide-up {
    text-indent: 105px;
}
span:nth-child(3) .slide-up {
    text-indent: 125px;
}
span:nth-child(1) .slide-up:focus,
span:nth-child(1) .slide-up:active,
span:nth-child(3) .slide-up:focus,
span:nth-child(3) .slide-up:active {
    text-indent: 0;
}
.slide-up:focus,
.slide-up:active {
    color: #377D6A;
    text-indent: 0;
    background: #fff;

&::-webkit-input-placeholder {
     color: #aaa;
 }
+ label {
    transform: translateY(-100%);

&:before {
     border-radius: 5px;
 }
&:after {
     transform: translateY(100%);
 }
}
}
.card-slide {
    display: inline-block;
    width: 215px;
    padding: 10px 0 10px 15px;
    font-family: "Open Sans", sans;
    font-weight: 400;
    color: #377D6A;
    background: #efefef;
    border: 0;
    border-radius: 3px;
    outline: 0;
    text-indent: 115px; // Arbitrary.
transition: all .3s ease-in-out;

&::-webkit-input-placeholder {
     color: #efefef;
     text-indent: 0;
     font-weight: 300;
 }

+ label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 15px;
    text-shadow: 0 1px 0 rgba(19,74,70,.4);
    background: #7AB893;
    transition: all .3s ease-in-out;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    transform-origin: right center;
    transform: perspective(300px) scaleX(1) rotateY(0deg);
}
}
span:nth-child(2) .card-slide {
    text-indent: 55px;
}
span:nth-child(3) .card-slide {
    text-indent: 150px;
}
span:nth-child(2) .card-slide:focus,
span:nth-child(2) .card-slide:active,
span:nth-child(3) .card-slide:focus,
span:nth-child(3) .card-slide:active {
    text-indent: 0;
}
.card-slide:focus,
.card-slide:active {
    color: #377D6A;
    text-indent: 0;
    background: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

&::-webkit-input-placeholder {
     color: #aaa;
 }
+ label {
    transform: perspective(600px) translateX(-100%) rotateY(80deg);
}
}
.swing {
    display: inline-block;
    width: 215px;
    padding: 10px 0 10px 15px;
    font-family: "Open Sans", sans;
    font-weight: 400;
    color: #377D6A;
    background: #efefef;
    border: 0;
    border-radius: 3px;
    outline: 0;
    text-indent: 60px; // Arbitrary.
transition: all .3s ease-in-out;

&::-webkit-input-placeholder {
     color: #efefef;
     text-indent: 0;
     font-weight: 300;
 }

+ label {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 15px;
    text-shadow: 0 1px 0 rgba(19,74,70,.4);
    background: #7AB893;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    transform-origin: 2px 2px;
    transform: rotate(0);
// There should be a better way
animation: swing-back .4s 1 ease-in-out;
}
}
@keyframes swing {
    0% {
        transform: rotate(0);
    }
    20% {
        transform: rotate(116deg);
    }
    40% {
        transform: rotate(60deg);
    }
    60% {
        transform: rotate(98deg);
    }
    80% {
        transform: rotate(76deg);
    }
    100% {
        transform: rotate(82deg);
    }
}
@keyframes swing-back {
    0% {
        transform: rotate(82deg);
    }
    100% {
        transform: rotate(0);
    }
}
.swing:focus,
.swing:active {
    color: #377D6A;
    text-indent: 0;
    background: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

&::-webkit-input-placeholder {
     color: #aaa;
 }
+ label {
    animation: swing 1.4s 1 ease-in-out;
    transform: rotate(82deg);
}
}
.balloon {
// As suggested by https://twitter.com/dbox/status/365888496486985728
display: inline-block;
    width: 215px;
    padding: 10px 0 10px 15px;
    font-family: "Open Sans", sans;
    font-weight: 400;
    color: #377D6A;
    background: #efefef;
    border: 0;
    border-radius: 3px;
    outline: 0;
    text-indent: 60px; // Arbitrary.
transition: all .3s ease-in-out;

&::-webkit-input-placeholder {
     color: #efefef;
     text-indent: 0;
     font-weight: 300;
 }

+ label {
    display: inline-block;
    position: absolute;
    top: 8px;
    left: 0;
    bottom: 8px;
    padding: 5px 15px;
    color: #032429;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(19,74,70,0);
    transition: all .3s ease-in-out;
    border-radius: 3px;
    background: rgba(122,184,147,0);

&:after {
     position: absolute;
     content: "";
     width: 0;
     height: 0;
     top: 100%;
     left: 50%;
     margin-left: -3px;
     border-left: 3px solid transparent;
     border-right: 3px solid transparent;
     border-top: 3px solid rgba(122,184,147,0);
     transition: all .3s ease-in-out;
 }
}
}
.balloon:focus,
.balloon:active {
    color: #377D6A;
    text-indent: 0;
    background: #fff;

&::-webkit-input-placeholder {
     color: #aaa;
 }
+ label {
    color: #fff;
    text-shadow: 0 1px 0 rgba(19,74,70,.4);
    background: rgba(122,184,147,1);
    transform: translateY(-40px);

&:after {
     border-top: 4px solid rgba(122,184,147,1);
 }
}
}